<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>{{ studentTitle }}</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin">
        <el-form :model="editForm" label-width="120px" ref="editForm" :rules="rules">
          <el-form-item label="头像:" prop="pic">
            <imgUploadModle @getChildValue="getChildValue" imgNumber="1" page="studentPic"
                            :picSrc="editForm.pic"></imgUploadModle>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="editForm.name" auto-complete="off" placeholder="填写姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别:" prop="sex">
                <el-radio-group v-model="editForm.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="民族:" prop="nation">
                <el-input v-model="editForm.nation" auto-complete="off" placeholder="填写民族"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期:" prop="birthday">
                <!--<el-date-picker-->
                <!--v-model="editForm.birthday"-->
                <!--type="date"-->
                <!--placeholder="选择出生日期"-->
                <!--format="yyyy-MM-dd"-->
                <!--value-format="yyyy-MM-dd"-->
                <!--:picker-options="pickerOptions1">-->
                <!--</el-date-picker>-->
                <el-input v-model="editForm.birthday" auto-complete="off" placeholder="出生日期（格式 20210101）"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入校时间:" prop="enrol_time">
                <el-date-picker
                    v-model="editForm.enrol_time"
                    type="date"
                    placeholder="选择入校时间"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学籍号:" prop="student_code">
                <el-input v-model="editForm.student_code" auto-complete="off" placeholder="填写学籍号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年段班级:" prop="class_id">
                <div style="display: flex">
                  <sectionInput @changeSection="changeSection" :sectionId.sync="editForm.section_id"></sectionInput>
                  <classInput @changeClass="changeClass" :sectionId.sync="editForm.section_id"
                              :classId.sync="editForm.class_id"></classInput>
                </div>
              </el-form-item>
            </el-col>
<!--            <el-col :span="12">-->
<!--              <el-form-item label="身份证号:" prop="identity_card">-->
<!--                <el-input v-model="editForm.identity_card" auto-complete="off" placeholder="填写身份证号"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入学身高:" prop="height">
                <div style="display: flex">
                  <el-input v-model="editForm.height" auto-complete="off" placeholder="填写入学身高"></el-input>
                  (cm)
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入学体重:" prop="weight">
                <div style="display: flex">
                  <el-input v-model="editForm.weight" auto-complete="off" placeholder="填写入学体重"></el-input>
                  (kg)
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手环ID:" prop="id_number">
                <el-input v-model="editForm.id_number" auto-complete="off" placeholder="手环ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监护人:" prop="guardian">
                <el-input v-model="editForm.guardian" auto-complete="off" placeholder="填写监护人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="户籍地址（以户籍本为主）:" prop="census_register">
                <div style="display: flex;">
                  <el-input v-model="editForm.census_register" auto-complete="off"
                            placeholder="填写户籍地址（以户籍本为主）" class="mr-10"></el-input>
                  <el-input v-model="editForm.census_register_town" auto-complete="off" placeholder="户籍所属镇（街）"
                            class="w-200"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="户口所在地:">
                <div style="display: flex;">
                  <el-input v-model="editForm.address" auto-complete="off" placeholder="镇/街道"
                            class="w-200 mr-10"></el-input>
                  <el-input v-model="editForm.town" auto-complete="off" placeholder="镇/街道" class="w-200"></el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="座号:">
                <el-input v-model="editForm.seat_number" placeholder="座号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--          <el-form-item label="" prop="position">-->
          <!--            <el-button type="primary" size="small" @click="submitForm('editForm',1)">保存</el-button>-->
          <!--            <el-button size="small" @click="submitForm('editForm',2)">返回</el-button>-->
          <!--            <p class="infodescribe" v-if="!studentId"><i class="el-icon-warning-outline"></i>提示：请确认填写的信息，提交后学生信息有些不可编辑</p>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <el-button type="primary" size="small" @click="submitForm('editForm',1)">确认并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {pagination, yearDay} from '@/utils/util.js'
import classInput from '@/components/template/classInput.vue'
import sectionInput from '@/components/template/sectionInput.vue'

import api from '@/utils/api.js'
import VDistpicker from 'v-distpicker'

export default {
  props: ['visible', 'studentId'],
  components: {
    VDistpicker,
    classInput,
    sectionInput
  },
  data() {
    return {
      studentTitle: '',
      dialogVisible: this.visible,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //  - 8.64e7 减去就是不包含今天的
        }
      },
      placeholders: {
        province: '------- 省 --------',
        city: '--- 市 ---',
        area: '--- 区 ---'
      },
      editForm: {
        address: '',
        student_code: '', // 学籍号
        name: '', // 姓名
        sex: '', // 性别
        section_id: '', // 年级
        class_id: '', // 班级
        id_number: '', // 卡号
        enrol_time: '', // 入学时间
        height: '',
        weight: '',
        pic: '',
        identity_card: '', // 身份证
        nation: '', // 民族
        birthday: '', // 出生日期
        census_register: '', // 	字符串 	必填 	1 	- 	户籍所在地
        census_register_town: '', // 	字符串 	必填 	1 	- 	户籍所属镇（街）
        guardian: '', // 	监护人
        province: '', //  	省
        city: '', //  	市
        district: '', //  	区
        town: '', //  	镇/街道
        seat_number: ''
        // status: '1' // 状态
      }, // 编辑界面数据
      rules: {
        student_code: [
          {required: true, message: '请输入学籍号', trigger: 'blur'},
        ],
        sex: [
          {required: true, message: '请选择学生性别', trigger: 'change'}
        ],
        class_id: [
          {required: true, message: '请选择学生班级', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入学生姓名', trigger: 'blur'}
        ],
        birthday: [
          {required: true, message: '请输入出生日期', trigger: 'blur'}
        ]
      },
      role: [],
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      classesvalue: '',
      className: '',
      sectionName: ''
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('详情页展示了')
        if (this.studentId) {
          this.InitFn()
        } else {
          this.studentTitle = '添加学生信息'
        }
      } else {
        this.editForm = {
          address: '',
          student_code: '', // 学籍号
          name: '', // 姓名
          sex: '', // 性别
          section_id: '', // 年级
          class_id: '', // 班级
          id_number: '', // 卡号
          enrol_time: '', // 入学时间
          height: '',
          weight: '',
          pic: '',
          identity_card: '', // 身份证
          nation: '', // 民族
          birthday: '', // 出生日期
          census_register: '', // 	字符串 	必填 	1 	- 	户籍所在地
          census_register_town: '', // 	字符串 	必填 	1 	- 	户籍所属镇（街）
          guardian: '', // 	监护人
          province: '', //  	省
          city: '', //  	市
          district: '', //  	区
          town: '', //  	镇/街道
          seat_number: ''
          // status: '1' // 状态
        } // 编辑界面数据
      }
    }
  },
  created() {
  },
  methods: {
    InitFn() {
      this.$fetch(this.api.admin_student_edit, {
        id: this.studentId
      }).then((response) => {
        if (response.code === 0) {
          this.studentTitle = '学生信息-' + response.vo.name
          this.editForm.pic = response.vo.pic
          this.editForm.name = response.vo.name
          // this.editForm.student_number = response.vo.student_number // 学号
          this.editForm.student_code = response.vo.student_code // 学籍号
          // this.editForm.age = response.vo.age // 年龄
          this.editForm.sex = response.vo.sex !== '未知' ? response.vo.sex : '' // 性别
          if (response.vo.sex !== '未知') {
            // 0女1 男
            this.editForm.sex = response.vo.sex === '男' ? 1 : 0;
          } else {
            this.editForm.sex = ''
          }
          this.editForm.address = response.vo.address
          // this.editForm.section_id = response.vo.section_id // 年级
          if (response.vo.section_id) {
            this.editForm.section_id = response.vo.section_id
          }
          if (response.vo.class_id) this.editForm.class_id = response.vo.class_id
          // this.editForm.class_id = response.vo.class_id// 班级
          this.editForm.id_number = response.vo.id_number // 卡号
          if (response.vo.enrol_time) {
            if (response.vo.enrol_time.indexOf('-') === -1) {
              this.editForm.enrol_time = yearDay(response.vo.enrol_time) // 入学时间
            } else {
              this.editForm.enrol_time = response.vo.enrol_time // 入学时间
            }
          }
          this.editForm.height = response.vo.height
          this.editForm.weight = response.vo.weight

          if (response.vo.classes) {
            this.className = response.vo.classes.class_name
          }
          if (response.vo.section) {
            this.sectionName = response.vo.section.section_name
          }
          // this.editForm.identity_card = response.vo.identity_card // 身份证
          this.editForm.identity_card = this.$verifyChekingMessage_notPass(response.vo.identity_card) // 身份证
          this.editForm.nation = response.vo.nation // 民族
          this.editForm.birthday = response.vo.birthday // 出生日期

          this.editForm.census_register = this.$verifyChekingMessage_notPass(response.vo.census_register) // 	字符串 	必填 	1 	- 	户籍所在地
          this.editForm.census_register_town = response.vo.census_register_town // 	字符串 	必填 	1 	- 	户籍所属镇（街）
          this.editForm.guardian = response.vo.guardian// 	监护人
          this.editForm.province = response.vo.province//  	省
          this.editForm.city = response.vo.city//  	市
          this.editForm.district = response.vo.district//  	区
          this.editForm.town = response.vo.town//  	镇/街道
          this.editForm.seat_number = response.vo.seat_number
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    submitForm() {
      console.log('提交的数据：', this.editForm)
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.submitFormAdd()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    submitFormAdd() {
      let dataoption = this.getJson(this.editForm)
      let url = api.admin_student_add;
      // let n = this
      if (this.studentId) {
        url = api.admin_student_edit
        dataoption.id = this.studentId
      }
      dataoption.sex = dataoption.sex === 1 ? '男' : '女';
      if(dataoption.birthday.length!==8){
        this.$message.error('出生日期格式不对，如20210101')
        return
      }
      this.$post(url, dataoption).then((response) => {
        if (!response.code) {
          this.$message.success(response.msg)
          this.$emit('initFn')
          this.closePOpup()
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onSelected(data) {
      this.editForm.province = data.province.value
      this.editForm.city = data.city.value
      this.editForm.district = data.area.value
    },
    getImgSrc(option) {
      console.log(option)
      this.editForm.pic = option
    },
    changeSection(option) {
      this.editForm.class_id = ''
      this.editForm.section_id = option
    },
    changeClass(option) {
      this.editForm.class_id = option
      this.$refs['editForm'].validate((valid) => {
      });
    },
    beforeRouteLeave(to, from, next) {
      to.meta.keepAlive = true
      next()
    },
    getChildValue(option) {
      this.editForm.pic = option
    },
    closePOpup() {
      this.$emit('update:visible', false)
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.popupbody-box {
  width: 82%;
}
</style>


